<template>
  <section class="recommend-main bgcFFF">
    <pull-up-reload
      :on-infinite-load="onInfiniteLoad"
      :parent-pull-up-state="infiniteLoadData.pullUpState"
      style="margin-bottom: 50px;">

      <RecommendList :newData="newData" @new-id="newId"></RecommendList>
    </pull-up-reload>

    <Loading :show="isLoading"></Loading>
    <Tabbar  @tabberSelected="tabberSelected" :activeNum="active"></Tabbar>
  </section>
</template>

<script type="text/ecmascript-6">
  import Tabbar from '../../components/Tabbar.vue'
  import PullUpReload from '../../components/PullUpReload.vue'
  import Loading from '../../components/Loading.vue'
  import RecommendList from '../../components/RecommendList.vue'


  import { tabChange } from '../../assets/js/utils'

  export default {
    components:{
      Tabbar,PullUpReload,Loading,RecommendList
    },
    data(){
      return{
        active:1,
        isLoading:false,
        newData:[
          {
            type:1,
            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
            src:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
            time:'北京青年报 20分钟前'
          },
          {
            type:2,
            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
            src:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
            time:'北京青年报 20分钟前'
          },
          {
            type:3,
            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
            src:[
              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
            ],
            time:'北京青年报 20分钟前'
          },
        ],//

        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    created(){
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
      },1000)
    },
    methods:{
      newId(id){
        this.$router.push({
          name:'recommendDetail',
          query:{
            id:id
          }
        })
      },
      tabberSelected(val){
        this.$router.push({
          path:tabChange(val),
        })
      },

      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      },
    }
  }
</script>


